<template>
  <!-- 标签页容器 -->
  <div class="tabs-container">
    <!-- 标签页导航 -->
    <div class="tabs">
      <!-- 循环渲染每个标签页 -->
      <div
        v-for="tab in tabs"
        :key="tab.id"
        class="tab"
        :class="{ active: activeTab === tab.id }"
        @click="setActiveTab(tab.id)"
      >
        {{ tab.label }}
      </div>
    </div>
    <!-- 标签页内容区域 -->
    <div class="tab-content">
      <!-- 动态渲染当前激活标签页对应的内容 -->
      <slot :name="activeTab"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    // 标签页列表，必填项，数组类型
    tabs: {
      type: Array,
      required: true
    },
    // 默认激活的标签页 ID，可选，字符串类型，默认为空
    defaultTab: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 当前激活的标签页 ID
      activeTab: ''
    };
  },
  created() {
    // 设置默认激活的标签页
    this.activeTab = this.defaultTab || (this.tabs.length > 0 ? this.tabs[0].id : '');
  },
  methods: {
    // 设置激活的标签页
    setActiveTab(tabId) {
      // 如果传入的标签页 ID 与当前激活的标签页 ID 相同，则不进行任何操作
      if (tabId === this.activeTab) return;
      // 更新当前激活的标签页 ID
      this.activeTab = tabId;
      // 触发 tab-change 事件，传递当前激活的标签页 ID
      this.$emit('tab-change', tabId);
    }
  }
};
</script>

<style scoped>
/* 标签页容器样式 */
.tabs-container {
  margin-bottom: 20px;
}

/* 标签页导航样式 */
.tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

/* 单个标签页样式 */
.tab {
  padding: 10px 20px;
  cursor: pointer;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

/* 激活的标签页样式 */
.tab.active {
  color: #6366f1;
  border-bottom: 2px solid #6366f1;
}

/* 鼠标悬停在非激活标签页上的样式 */
.tab:hover:not(.active) {
  color: #4b5563;
}
</style>